<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full  flex flex-col">
            <el-page-header @back="$router.back()" :content="bool_edit ? '编辑商品' : '添加商品'">
            </el-page-header>
            <el-divider class=" mb-w10"></el-divider>
        </div>
        <div class="w-full h-w800 flex flex-col overflow-y-auto ">
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20"><span class=" text-cred1">*</span> 商品名称</div>
                <el-input class="w-w2/4" placeholder="请输入内容" v-model="s_goods.m_goods.name" clearable autofocus>
                </el-input>
            </div>
            <div class="flex flex-row items-start  w-w1/2   text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20 "><span class=" text-cred1">*</span>列表封面</div>
                <div class="flex flex-col">
                    <el-upload action="" :show-file-list="false" :on-change="action_select_list_cover"
                        :auto-upload="false" accept="image/png, image/jpeg">
                        <img v-if="s_goods.m_goods.listCover" :src="s_goods.m_goods.listCoverUrl"
                            style="width: 100px;height: 100px;  display: block;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"
                            style="width:100px;height:100px;line-height:100px;"></i>
                    </el-upload>
                    <div class=" mt-w5 text-f15 text-c6">图片尺寸：196px*192px</div>
                </div>
            </div>
            <div class="flex flex-row items-start  w-w1/2   text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20 "><span class=" text-cred1">*</span>详情封面</div>
                <div class="flex flex-col">
                    <el-upload action="" :show-file-list="false" :on-change="action_select_banner_cover"
                        :auto-upload="false" accept="image/png, image/jpeg">
                        <img v-if="s_goods.m_goods.infoCover" :src="s_goods.m_goods.infoCoverUrl"
                            style="width: 244px;height: 100px;  display: block;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"
                            style="width:244px;height:100px;line-height:100px;"></i>
                    </el-upload>
                    <div class=" mt-w5 text-f15 text-c6">图片尺寸：828px*340px</div>
                </div>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30" v-if="!bool_edit">
                <div class=" w-w1/4 text-right pr-w20"><span class=" text-cred1">*</span>商品类型</div>
                <el-radio-group class="w-w2/4" v-model="s_goods.m_goods.type" @input="action_change_type">
                    <el-radio :label="1">心理测评</el-radio>
                    <el-radio :label="2">心理咨询</el-radio>
                </el-radio-group>
            </div>
            <div class="flex flex-row items-start  w-w1/2   text-c3 text-f16  mt-w30" v-if="s_goods.m_goods.type == 1">
                <div class=" w-w1/4 text-right pr-w20 "><span class=" text-cred1">*</span>报告封面</div>
                <div class="flex flex-col">
                    <el-upload action="" :show-file-list="false" :on-change="action_select_report_cover"
                        :auto-upload="false" accept="image/png, image/jpeg">
                        <img v-if="s_goods.m_goods.reportCover" :src="s_goods.m_goods.reportCoverUrl"
                            style="width: 90px;height: 160px;  display: block;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"
                            style="width:90px;height:160px;line-height:160px;"></i>
                    </el-upload>
                </div>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30" v-if="!bool_edit">
                <div class=" w-w1/4 text-right pr-w20"><span class=" text-cred1">*</span>关联内容</div>
                <el-select class="w-w2/4" v-model="s_goods.m_goods.typeId" placeholder="请选择">
                    <el-option v-for="(item, index) in s_goods.list_type_data" :key="index" :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20">商品原价</div>
                <el-input class="w-w2/4" type="number" placeholder="请输入价格" v-model="s_goods.m_goods.oldPrice" clearable>
                </el-input>
                <div class="ml-w10">元</div>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20"><span class=" text-cred1">*</span>商品现价</div>
                <el-input class="w-w2/4" type="number" placeholder="请输入价格" v-model="s_goods.m_goods.truePrice"
                    clearable>
                </el-input>
                <div class="ml-w10">元</div>
            </div>
            <div class="flex flex-row items-start w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class="text-right pr-w20 w-w1/4 "><span class=" text-cred1">*</span>商品详情</div>
                <el-input class="w-w2/4" type="textarea" :rows="4" placeholder="请输入内容" v-model="s_goods.m_goods.desc">
                </el-input>
            </div>
            <div class="flex flex-row items-start w-full   text-c3 text-f16  mt-w60">
                <div class="text-right pr-w20" style="width:12.5%"><span class=" text-cred1">*</span>商品内容</div>
                <UITinymceEditor :data="s_goods.m_goods.content" @editor_change="action_editor_change"
                    class="w-w3/4 h-w500">
                </UITinymceEditor>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20"><span class=" text-cred1">*</span>购买须知</div>
                <el-input class="w-w2/4" placeholder="请输入内容" v-model="s_goods.m_goods.notice" clearable>
                </el-input>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20"><span class=" text-cred1">*</span>活动商品</div>
                <el-radio-group class="w-w2/4" v-model="s_goods.m_goods.activity" @input="action_change_activity">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </div>
            <div class="flex flex-row items-center w-w1/2 h-w50 leading-w50 text-c3 text-f16  mt-w30">
              <div class=" w-w1/4 text-right pr-w20">排序</div>
              <el-input-number class="w-w2/4" v-model="s_goods.m_goods.sort" :step="1" :min="0">
              </el-input-number>
            </div>
            <div class="flex flex-row items-start w-w1/2   text-c3 text-f16  mt-w30">
                <div class=" w-w1/4 text-right pr-w20"></div>
                <el-button class="w-w2/4 bg-cmain" type="primary" @click="action_add_goods">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped>

</style>
